<template>
	<el-row class='mb28  text-center'  >
		<el-row class="pb10">
					<el-row class='text-left mt12  mb10'>{{proName}}
			      </el-row>
		          <el-col  :span='10'  :offset='13' >  
		                <div align="right" class=' mr20 '>
		                		<el-button  type='primary'    icon="el-icon-plus"   size="small" round   @click="addNewInvestor()">新增</el-button>
		                		<el-button  type='primary'             size="small" round   @click="handleExport()"><i class='icon icon-import pr5'></i>导入</el-button>
		                        <el-button  class='export-icon'               size="small" round   @click="handleExport()"><i class='fa fa-share pr5'></i>导出</el-button>
		                </div>
		          </el-col>
		    </el-row>
		<!-- table -->
		    <el-table   :data="tableList" :cell-class-name='hover'  @cell-click='checkUser'>
		          
		          <el-table-column prop="name"            label="姓名"     align="center" ></el-table-column>
		          <el-table-column prop="idcode"            label="身份证号"   align="center"   ></el-table-column>
		          <el-table-column prop="bankAccount"            label="账户"     align="center"  ></el-table-column>
		          <el-table-column prop="investmentAmt"            label="投资金额"     align="center"   ></el-table-column>
		          <el-table-column prop="file"            label="附件资料"     align="center"  ></el-table-column>
		      
		          <el-table-column                        label="操作"          align="center"  width="250">
		                  <template v-slot="list">
		                          <el-button  type="primary" size="mini" round @click="EditInvestor(list.$index, list.row)">编辑</el-button>
		                          <el-button  type="danger" size="mini" round @click="del_investor(list.row.code)">删除</el-button>
		                  </template>
		          </el-table-column>
		    </el-table>
		    <!-- 分页 -->
		    <el-pagination class='mt28'
		            background
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :current-page="1"
		            :page-sizes="[10, 20]"
		            :page-size="10"
		            :pager-count="5"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="Total">
		    </el-pagination>
		    <Investor  ref='investor'  v-on:save-finished='pageInit()'></Investor>
	</el-row>
</template>

<script type="text/javascript">
//interface
import { listInvestor,delInvestor }  from  '@/api/professional_work/object/index'
//组件
import  Investor  from '@/components/professional_work/object/add_investor'
export default {
	name: 'investor',
	data(){
		return {
			fir_activeName:'first',
			tableList:[],
			Total:null,
			search:{
				name:'',
				limit:10,
				currentPage:1,
			},
			object_code:'',
			proName:'',//产品名称
		}
	},
	created(){
		this.object_code = this.$route.query.code
		this.proName = this.$route.query.proName
		// console.log(this.$route)
		this.pageInit()
	},
	methods:{
		pageInit(){
        	this.loading=true
		    let that =this
		    // console.log(code)
		      listInvestor(this.search,this.object_code).then(res => {
		          this.loading = false
		          this.Total = res.data.totalRs
		          this.tableList = res.data.dataList
		      })
		      .catch(error => {
		            this.loading = false
		            that.outputError(error)
		      })
		},
		addNewInvestor(){
			this.$refs.investor.$emit('openDialog',this.object_code)
		},
		EditInvestor(index,code){
			this.$refs.investor.$emit('openEditDialog',)
		},
		hover({row, column, rowIndex, columnIndex}){
	    // console.log(row, column, rowIndex, columnIndex)
	    //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置   
	      // if(columnIndex == 1 ){  //这里不能用index来判断，因为表头会动态改变
	      //   return 'activeCol'
	      // }
	      if(column.label == '附件资料'){
	            return 'activeCol'
	      }
	    },
	    //点击列中的数据改变 
	    checkUser(row, column, cell, event){
	        // console.log(row, column, cell, event)
	        if(column.label == '附件资料'){
	            //下载

	        }
	    },
	    del_investor(code){
	    	this.$confirm('确定删除？', '提示', {
	            confirmButtonText: '确定',
	            cancelButtonText: '取消',
	            type: 'warning'
	        })
	        .then(() => {
	        	this.loading=true
				let that =this
			    // console.log(code)
			      delInvestor(code).then(res => {
			          this.loading = false
			          this.pageInit()
			      })
			      .catch(error => {
			            this.loading = false
			            that.outputError(error)
			      })
			})
	    	
		    
	    },
	    /*每页显示条数变化*/
	    handleSizeChange(val) {
	      this.search.limit = val;
	      this.pageInit()
	    },
	    /*页数变化 事件触发
	     *@method 方法名
	     *@for 所属类名
	     *@param{val} 第几页
	     *@return {} 
	    */
	    handleCurrentChange(val) {
	      this.search.currentPage = val
	      this.pageInit()
	    },
     },
     components:{
     	Investor
     }
}
</script>

<style  scoped>
.icon-import{width: 12px;height: 12px;background: url('../../../assets/images/img/option/icon-import.png') no-repeat}
</style>